<template>
  <div class="powerbi-box">
    <div id="powerbi-main-box" ref="powerbiMainBox" style="height: 100%"></div>
  </div>
</template>
<script>
import * as pbi from 'powerbi-client';
import { getEmbedInfo1 } from '@const/api_staffCenter';

export default {
  name: 'PowerBi',
  layout: 'powerbi',
  created() {
    this.initialPowerBi();
  },
  methods: {
    initialPowerBi() {
      this.$axios({
        url: getEmbedInfo1,
        method: 'get',
      }).then((res) => {
        const embedData = JSON.parse(res.data.payload);
        const tokenType = '1';
        const { models } = pbi;
        const permissions = models.Permissions.All;
        const config = {
          type: 'report',
          tokenType:
            tokenType === '0' ? models.TokenType.Aad : models.TokenType.Embed,
          accessToken: embedData.embedToken,
          embedUrl: embedData.embedReports[0].embedUrl,
          id: embedData.embedReports[0].reportId,
          permissions,
          settings: {
            panes: {
              filters: {
                visible: true,
              },
              pageNavigation: {
                visible: true,
              },
            },
          },
        };
        const embedContainer = this.$refs.powerbiMainBox;
        // eslint-disable-next-line no-undef
        powerbi.embed(embedContainer, config);
      });
    },
  },
};
</script>
